<template>
    <div class="register">

<!--            有验证码的高度是530px-->
        <el-card style="width: 400px;height: 300px;text-align: center;background-color: rgba(255,255,255,0.8)">
            <h1 style="font-size: 18px;margin-top: 15px!important;">博客登录</h1>

            <div style="margin-top: 50px!important;">
                <el-form style="margin-top: 20px" size="medium" :model="form" :rules="rules" ref="formRef"
                         label-width="70px">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <div style="text-align: center;margin-left: 30px">
<!--                        <slide-verify ref="slideblock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled"-->
<!--                                      @fail="onFail" @refresh="onRefresh" :slider-text="text" :imgs="imgs"-->
<!--                                      ></slide-verify>-->
                    </div>

                    <el-button style="width: 100%;margin-top: 10px" @click="register('formRef')" type="primary">登录
                    </el-button>
                </el-form>
            </div>

        </el-card>
    </div>
</template>

<script>
    // import jsonwebtoken
    import jwtDecode from 'jwt-decode'
    // import img1 from '/public/img/img1.jpg'
    // import SliderCheck from './SliderCheck'
    // import img0 from '../assets/img.jpg';
    import img1 from '/public/img/img1.jpg'
    import img2 from '/public/img/img1.jpg'

    // import img10 from '@/assets/img10.jpg';
    // import img11 from '@/assets/img11.jpg'
    // import img5 from '@/assets/img5.jpg';
    // import av01 from '../assets/av01.png'
    // import av from '@/assets/av.jpg'
    // components: { SliderCheck }
    export default {
        name: "Register",
        data() {
            return {
                msg: "",
                text: '向右滑动->',
                imgs: [
                    // img0,
                    img1,
                    // img2,
                    // img3,
                    // img4,

                    // img10,
                    // img11,
                    // img5,
                    // av,
                    // av01
                ],
                flag: false,  // 滑块验证
                form: {
                    username: "",
                    password: ""
                },
                rules: {
                    username: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'},

                    ], password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},

                    ],
                }
            }
        },
        methods: {
            accuracy() {

            },
            onSuccess(times) {
                console.log('验证通过');
                this.msg = `执行, 耗时${(times / 1000).toFixed(1)}s`;
                this.$message.success(this.msg);
                this.flag = true
            },
            onFail() {
                console.log('验证不通过');
                this.$message.error('验证不通过');
                this.flag = false
                this.msg = ''
            },
            onRefresh() {
                console.log('点击了刷新小图标');
                this.msg = ''
            },
            onFulfilled() {
                console.log('刷新成功啦！');
            },
            onAgain() {
                console.log('检测到非人为操作的哦！');
                this.msg = 'try again';
                // 刷新
                this.handleClick();
            },
            handleClick() {
                this.$refs.slideblock.reset();
                this.msg = ''
            },

            register(formRef) {
                const test = localStorage.getItem('token');
                if (test) {
                    this.$message.error('您已经登录了！')
                    return;
                }
                // if (!this.flag) {
                //     this.$message.error('请先验证人机');
                //     return;
                // }
                this.$refs[formRef].validate(async (valid) => { // 前端校验
                        if (valid) {
                            const {data: res} = await this.$http.post('user/login', this.form)
                            // console.log(res);
                            if (res.meta.status === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '登录成功，可在首页自定义头像'
                                })
                                // console.log(res)
                                const token = jwtDecode(res.data)
                                // console.log(token);
                                // console.log(token.type)
                                localStorage.setItem('token', res.data);
                                localStorage.setItem('type', token.type);

                                this.$router.push('index');
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.meta.msg
                                })
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: '请检查！'
                            })
                            return false;
                        }
                    }
                );
            }
        }
    }
</script>

<style lang="less" scoped>
    .register {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        /*background-color: #E9ECEF;*/
        background-color: #F8F9FF;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57d270df67904.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635921877&t=6681be41f350bcd596184582466b9082");
    }
</style>